<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>

<body>
    <div class="app">
        <form @submit.prevent="go">
            <label for="acc">帐号</label>
            <input type="text" id="acc" v-model.trim="acc">
            <br>
            <label for="psw">密码</label>
            <!-- trim 去除首尾空格 -->
            <input type="text" id="psw" v-model.trim="psw">
            <br>
            <span>性别</span> <input type="radio" name="sex" v-model="sex" value="male">男<input type="radio" name="sex" v-model="sex" value="female">女
            <br>
            <!--number转为number型-->
            年龄
            <input type="number" v-model.number="age">
            <br> 爱好：<input type="checkbox" value="C" v-model="hobbit">C语言<input type="checkbox" value="C++" v-model="hobbit">C++<input type="checkbox" value="JAVA" v-model="hobbit">JAVA <br> 所属校区
            <select v-model="city">
                <option value="">选择校区</option>
                <option value="dong">东</option>
                <option value="nan">南</option>
                <option value="xi">西</option>
                <option value="bei">北</option>
            </select>
            <br> 其他信息
            <!-- lazy失去焦点再绑定 -->
            <textarea v-model.lazy="other"></textarea><br><input type="checkbox" name="" id="read" v-model="agree"><label for="read"> 阅读并接受
            <a href="#">用户协议</a></label><br>
            <button>提交</button>
        </form>

    </div>
    <script src="../vue.js"></script>
    <script>
        const vm = new Vue({
            data: {
                psw: '',
                acc: '',
                sex: 'male',
                city: '',
                hobbit: [],
                other: '',
                agree: false,
                age: ''
            },
            methods: {
                go() {
                    let arrr = []
                    for (const key in this._data) {
                        arrr.push(this._data[key])
                    }
                    console.log(arrr);
                }
            }
        })
        vm.$mount('.app')
    </script>
</body>

</html>